<template>
    <div :style="{'display':'flex','flex-direction':direction}">
        <div class="list" v-for="(structItem, key) in struct" :key="key">
            <div v-if="key=='input'">
                <Input
                    v-model="structItem.value"
                    @on-change="structItem.onChange ? structItem.onChange(structItem.value) : tempMethod"
                    :placeholder="structItem.placeholder"
                />
            </div>
            <div v-else-if="key=='select'">
                <Select
                    v-model="structItem.value"
                    @on-change="structItem.onChange ? structItem.onChange(structItem.value) : tempMethod"
                >
                    <Option
                        v-for="item in structItem.options"
                        :value="item.value"
                        :key="item.value"
                    >{{ item.label }}</Option>
                </Select>
            </div>
            <div v-else-if="key=='button'">
                <Button
                    :type="structItem.type"
                    @click="structItem.onClick ? structItem.onClick(struct): tempMethod"
                    long
                    v-text="structItem.value"
                ></Button>
            </div>
            <div v-else-if="key=='tag'">
                <Tag
                    v-for="(item, index) in structItem.more"
                    :key="index"
                    :color="item.color"
                    :type="structItem.type"
                    @click.native="structItem.onClick ? structItem.onClick(item) : tempMethod"
                    v-text="item.label"
                ></Tag>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "ScreenPart",
  props: {
    struct: {
      type: Object,
      default: () => ({
        input: {
          label: "输入框",
          name: "in1",
          placeholder: "请输入",
          value: "",
          onChange: () => {}
        },
        select: {
          label: "选择列表",
          name: "se1",
          placeholder: "请选择",
          value: "0",
          options: [
            {
              value: "0",
              label: "的"
            }
          ],
          onChange: () => {}
        }
      })
    },
    direction: {
      type: String,
      default: "column"
    },
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {};
  },
  methods: {
    tempMethod(){

    }
  }
};
</script>

<style lang="less" scoped>
.list {
  > div {
    margin-bottom: 15px;
  }
}
</style>